<template>
  <el-col :span="12" style="padding-left:20px; overflow: auto;">
    <el-timeline reverse>
      <template v-for="(item, i) in list">
        <el-timeline-item :timestamp="item.handleTime | toDate()" placement="top" :key="i"
          v-if="item.handleStatus==0">
          <el-card>
            <el-row>
              <el-col :span='18'>
                <p class="timeline-cell">审核节点：{{item.nodeName}}</p>
              </el-col>
              <el-col :span='6'>
                <p class="timeline-cell" style="text-align:right">
                  <el-link :underline="false" type="danger">{{ item.handName }}</el-link>
                </p>
              </el-col>
            </el-row>
            <p class="timeline-cell">审核人员：{{item.userName}}</p>
            <p class="timeline-cell" v-if="item.handleOpinion">
              处理意见：{{item.handleOpinion}}</p>
            <p class="timeline-cell" v-if="item.signImg">
              审核签名：<img :src="item.signImg" class="signImg"></p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item :timestamp="item.handleTime | toDate()" placement="top" :key="i"
          v-if="item.handleStatus==1">
          <el-card>
            <el-row>
              <el-col :span='18'>
                <p class="timeline-cell">审核节点：{{item.nodeName}}</p>
              </el-col>
              <el-col :span='6'>
                <p class="timeline-cell" style="text-align:right">
                  <el-link :underline="false" type="success">{{ item.handName }}</el-link>
                </p>
              </el-col>
            </el-row>
            <p class="timeline-cell">审核人员：{{item.userName}}{{item.status==1?'(加签)':''}}</p>
            <p class="timeline-cell" v-if="item.handleOpinion">
              处理意见：{{item.handleOpinion}}</p>
            <p class="timeline-cell" v-if="item.signImg">
              审核签名：<img :src="item.signImg" class="signImg"></p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item :timestamp="item.handleTime | toDate()" placement="top" :key="i"
          v-if="item.handleStatus==2">
          <el-card>
            <p class="timeline-cell">发起人：{{item.userName}}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item :timestamp="item.handleTime | toDate()" placement="top" :key="i"
          v-if="item.handleStatus==3">
          <el-card>
            <p class="timeline-cell">撤回节点：{{item.nodeName}}</p>
            <p class="timeline-cell">撤回人员：{{item.userName}}</p>
            <p class="timeline-cell">撤回原因：{{item.handleOpinion}}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item :timestamp="item.handleTime | toDate()" placement="top" :key="i"
          v-if="item.handleStatus==4">
          <el-card>
            <el-row>
              <el-col :span='18'>
                <p class="timeline-cell">审核节点：{{item.nodeName}}</p>
              </el-col>
              <el-col :span='6'>
                <p class="timeline-cell" style="text-align:right">
                  <el-link :underline="false" type="danger">流程终止</el-link>
                </p>
              </el-col>
            </el-row>
            <p class="timeline-cell">执行人员：{{item.userName}}</p>
            <p class="timeline-cell">执行动作：终止</p>
            <p class="timeline-cell">终止原因：{{item.handleOpinion}}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item :timestamp="item.handleTime | toDate()" placement="top" :key="i"
          v-if="item.handleStatus==5">
          <el-card>
            <el-row>
              <el-col :span='18'>
                <p class="timeline-cell">审核节点：{{item.nodeName}}</p>
              </el-col>
              <el-col :span='6'>
                <p class="timeline-cell" style="text-align:right">
                  <el-link :underline="false" type="primary">流程指派</el-link>
                </p>
              </el-col>
            </el-row>
            <p class="timeline-cell">执行人员：{{item.userName}}</p>
            <p class="timeline-cell">执行动作：指派</p>
            <p class="timeline-cell">指派人员：{{item.operatorId}}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item :timestamp="item.handleTime | toDate()" placement="top" :key="i"
          v-if="item.handleStatus==6">
          <el-card>
            <el-row>
              <el-col :span='18'>
                <p class="timeline-cell">审核节点：{{item.nodeName}}</p>
              </el-col>
              <el-col :span='6'>
                <p class="timeline-cell" style="text-align:right">
                  <el-link :underline="false" type="primary">流程加签</el-link>
                </p>
              </el-col>
            </el-row>
            <p class="timeline-cell">执行人员：{{item.userName}}</p>
            <p class="timeline-cell">执行动作：加签</p>
            <p class="timeline-cell">加签人员：{{item.operatorId}}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item :timestamp="item.handleTime | toDate()" placement="top" :key="i"
          v-if="item.handleStatus==7">
          <el-card>
            <el-row>
              <el-col :span='18'>
                <p class="timeline-cell">审核节点：{{item.nodeName}}</p>
              </el-col>
              <el-col :span='6'>
                <p class="timeline-cell" style="text-align:right">
                  <el-link :underline="false" type="primary">流程转审</el-link>
                </p>
              </el-col>
            </el-row>
            <p class="timeline-cell">执行人员：{{item.userName}}</p>
            <p class="timeline-cell">执行动作：转审</p>
            <p class="timeline-cell">转审人员：{{item.operatorId}}</p>
          </el-card>
        </el-timeline-item>
      </template>
      <el-timeline-item :timestamp="endTime | toDate()" placement="top" v-if='endTime'>
        <el-card>
          <p class="timeline-cell">流程结束</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </el-col>
</template>

<script>
export default {
  props: {
    list: { type: Array, default: [] },
    properties:{type: Object, default:{}},
    endTime: { type: Number, default: 0 },
  },
  data() {
    return {
      
    }
  },
  name: 'recordList',
  mounted() {
    debugger
  },
  watch: {
    list(list){
     list.forEach(item => {
      let nodeName = item.nodeName
      let handleStatus = item.handleStatus
      let handName = handleStatus===0?'审核拒绝':'审核通过'
      if(nodeName.indexOf('审核')>=0){
        handName = handleStatus===0?'审核驳回':'审核通过'
      }else if(nodeName.indexOf('重点单位审批')>=0){
        handName = handleStatus===0?'任务拒绝':'确认处置'
      }else if(nodeName.indexOf('网信办审批')>=0){
        handName = handleStatus===0?'任务驳回':'任务下发'
      }
      item.handName = handName
     });
    },
    properties(val){
     
    }
  }
}

</script>
<style lang="scss" scoped>
.timeline-cell .el-link {
  cursor: auto !important;
}
</style>